<template>
  <div class="main">
    <div class="main-item" :class="[item.isMarginBtm ? 'main-item-btm' : '']" v-for="item in formItem" :key="item.key">
      <div>{{ item.label }}</div>
      <div class="right-text" v-if="item.propsType == 'select'">
        {{
          item.propsOptions.filter(it => it.value == dataForm[item.key]).length
            ? item.propsOptions.filter(it => it.value == dataForm[item.key])[0].name
            : ''
        }}
      </div>
      <div class="right-text" v-else>
        <a-popover
          v-if="
            item.label == '所属行政区' ||
            item.label == '设计单位' ||
            item.label == '建成目的' ||
            item.label == '所属流域'
          "
          placement="top"
        >
          <template slot="content">
            <p>{{ dataForm[item.key] }}</p>
          </template>
          <span>{{ dataForm[item.key] }}</span>
        </a-popover>
        <span v-else>{{ dataForm[item.key] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    dataForm: {},
    formItem: []
  }
};
</script>

<style scoped lang="scss">
.main {
  .main-item {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(22, 102, 240, 0.2);
    padding: 12px;
    margin-bottom: 4px;

    .right-text {
      max-width: 180px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      word-wrap: break-word;
    }
  }

  .main-item-btm {
    margin-bottom: 8px;
  }
}
</style>
<style scoped></style>
